<template>
  <view :style="themeColor">
    <view class="page">
      <view class="flex flex-direction align-stretch benben-position-layout flex home_flex_1"
        :style="{height:(170+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center justify-center'>
          <view class='flex flex-wrap align-center home_fd1_0_c0' @tap="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/sy/selecetCaty/selecetCaty`">
            <text class='home_fd1_0_c0_c0'>首页</text>
          </view>
        </view>
        <view class='flex align-center'>
          <view class='flex align-center flex-sub home_fd1_1_c0'>
            <image class='home_fd1_1_c0_c0' mode="aspectFit" :src='STATIC_URL+"516.png"'></image>
            <view style="position: relative">
              <swiper ref="benbenSwiperfd1_1_c0_c1" @change="bannerIndexfd1_1_c0_c1 = $event.detail.current"
                class='flex position-relative home_fd1_1_c0_c1' previous-margin="0rpx" next-margin="0rpx"
                :display-multiple-items="1" :vertical='true' :interval="5000" :duration="500" :autoplay='true'
                :circular='true'>

                <template>
                  <swiper-item class='flex  home_fd1_1_c0_c1' @tap.stop="handleJumpDiy" data-type="navigateTo"
                    :data-url="`/pages/sy/search/search`">
                    <text class='home_fd1_1_c0_c1_c1_c0'>请输入关键字搜索</text>
                  </swiper-item>
                </template>

              </swiper>
            </view>
          </view>
        </view>

      </view>
      <view :style="{height: (170+StatusBarRpx)+'rpx'}"></view>
      <!---flex布局flex布局开始-->
      <view class="flex flex-wrap align-center justify-center benben-flex-layout">
        <view style="position: relative">
          <swiper ref="benbenSwiperfd2_0" :current='index' @change="bannerIndexfd2_0 = $event.detail.current"
            class='flex position-relative home_fd2_0' previous-margin="0rpx" next-margin="0rpx"
            :display-multiple-items="1" :interval="5000" :duration="500" :autoplay='true' :circular='true'>

            <template v-for='(item,key0) in dataRotograph'>
              <swiper-item class='flex  home_fd2_0' :key='key0'>
                <image class='home_fd2_0_c1_c0' mode="aspectFill" :src='item.thumb' @tap.stop="gothumbFunc(item.href)">
                </image>
              </swiper-item>
            </template>

          </swiper>
          <view style="position: absolute" class="flex dot flex align-center justify-center home_swiperDotfd2_0">
            <template v-for="(item, index) in (dataRotograph.length)">
              <view :key="index" v-if="bannerIndexfd2_0 == index"
                class="flex dot selected flex align-center justify-center home_swiperDotSelectedfd2_0">
              </view>
              <view :key="index" v-else
                class="flex dot unselected flex align-center justify-center home_swiperDotUnselectedfd2_0">
              </view>
            </template>
          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout">
        <view class='flex flex-wrap align-stretch home_fd3_0'>
          <view class='flex flex-direction flex-wrap align-center self-center justify-center home_fd3_0_c0_c0_c1_c0_c0'
            v-for='(item,key0) in dataList' :key='key0' @tap.stop="golistFunc(item)">
            <image class='home_fd3_0_c0_c0_c1_c0_c0_c0' mode="aspectFill" :src='item.thumb'></image>
            <text class='home_fd3_0_c0_c0_c1_c0_c0_c1'>{{item.name}}</text>
          </view>
          <!-- <view class='flex flex-wrap align-center'>
            <view style="position: relative">
              <swiper ref="benbenSwiperfd3_0_c0_c0" :current='firstNum'
                @change="bannerIndexfd3_0_c0_c0 = $event.detail.current" class='flex position-relative home_fd3_0_c0_c0'
                previous-margin="0rpx" next-margin="0rpx" :display-multiple-items="1" :interval="5000" :duration="500">

                <template v-for='(item,key0) in dataList'>
                  <swiper-item class='flex  home_fd3_0_c0_c0_c1_c0' :key='key0'>
                    <view class='flex flex-wrap align-stretch home_fd3_0_c0_c0_c1_c0'>
                      <view
                        class='flex flex-direction flex-wrap align-center self-center justify-center home_fd3_0_c0_c0_c1_c0_c0'
                        @tap.stop="golistFunc(item)">
                        <image class='home_fd3_0_c0_c0_c1_c0_c0_c0' mode="aspectFill" :src='item.thumb'></image>
                        <text class='home_fd3_0_c0_c0_c1_c0_c0_c1'>{{item.name}}</text>
                      </view>

                    </view>
                  </swiper-item>
                </template>

              </swiper>
            </view>
          </view> -->
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout home_flex_4">
        <view class='flex align-center justify-center home_fd4_0'>
          <image class='home_fd4_0_c0' mode="aspectFit" :src='STATIC_URL+"18.png"'></image>
          <text class='home_fd4_0_c1'>{{$t('为你推荐')}}</text>
          <image class='home_fd4_0_c0' mode="aspectFit" :src='STATIC_URL+"17.png"'></image>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!---商品列表_商品1flex布局开始-->
      <view class="flex flex-wrap align-center benben-flex-layout home_flex_5">
        <template v-for='(item,key0) in goods_List'>
          <view class='flex flex-direction flex-wrap align-stretch home_fd5_0' @tap.stop="handleJumpDiy"
            data-type="navigateTo" :data-url="`/pages/fl/shopDetail/shopDetail?id=${item.aid}`" :key='key0'>
            <image class='home_fd5_0_c0' mode="aspectFill" :src='item.thumb'></image>
            <text class='home_fd5_0_c1'>{{item.name}}</text>
            <view class='flex flex-wrap align-center justify-between home_fd5_0_c2'>
              <text class='home_fd5_0_c2_c0'>¥{{item.shop_price}}</text>
              <view class='flex flex-wrap align-center justify-center home_fd5_0_c2_c1'>
                <text class='home_fd5_0_c2_c1_c0'>{{item.label_name}}</text>
              </view>
            </view>
          </view>
        </template>
        <fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
          :listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
      </view>

      <!---商品列表_商品1flex布局结束-->

      <app-update ref="update"></app-update>


    </view>
  </view>
</template>
<script>
  import pagingList from '@/common/mixin/paging_list.js';
  import {
    validate
  } from '@/common/utils/validate.js'

  export default {
    components: {},
    mixins: [pagingList],

    data() {
      return {
        "popupShow1714113155730": false,
        "bannerIndexfd3_0_c0_c0": 0,
        "bannerIndexfd3_0_c2": 0,
        "bannerIndexfd2_0": 0,
        "bannerIndexfd1_1_c0_c1": 0,
        "popupShow1685609745125": false,
        "minixPagingListsApi": "",
        "pageingListApiMethod": "",
        "allowOnloadGetList": false,
        "time_type": [{
          "name": "10:00",
          "value": "1",
          "image": ""
        }, {
          "name": "12:00",
          "value": "2",
          "image": ""
        }, {
          "name": "14:00",
          "value": "3",
          "image": ""
        }],
        "time_id": "1",
        "dataClassification": [],
        "dataList": [],
        "dataGoodsList": [],
        "dataRotograph": [],
        "index": 0,
        "navCentral": [],
        "rightAdvertisement": [],
        "leftAdvertisement": [],
        "seckillShop": {
          "activity_price": "",
          "goods_id": "",
          "is_spec": "",
          "thumb": "",
          "shop_price": "",
          "sales_sum": "",
          "stock": "",
          "have_sum": "",
          "rate": "",
          "economize_price": "",
          "activity_id": "",
          "name": ""
        },
        "secondaryClassifieds": {
          "category_list": [],
          "ad_list": [],
          "diy_category_list": []
        },
        "subadvertisement": [],
        "messageNum": {
          "article": "",
          "message": "",
          "chat": "",
          "all": ""
        },
        "cid": "",
        "tjStatus": "3",
        "goods_type": "",
        "treatmentList": [],
        "tjStatusType": [{
          "name": "猜你喜欢",
          "value": "3",
          "image": ""
        }, {
          "name": "首发新品",
          "value": "4",
          "image": ""
        }, {
          "name": "热门推荐",
          "value": "2",
          "image": ""
        }],
        "price": 0,
        "goods_id": "",
        "activity_id": "",
        "sku_id": "",
        "firstNum": 0,
        "dataUserInfo": {
          "invite_code": "",
          "address": "",
          "address_code": "",
          "hobby": "",
          "tags": "",
          "id": "",
          "userlevel_id": "",
          "mobile": "",
          "real_name": "",
          "avatar": "",
          "account": "",
          "email": "",
          "birthday": "",
          "gender": "",
          "create_time": "",
          "user_money": "",
          "freeze_money": "",
          "total_consumption_money": "",
          "score": "",
          "_mobile": "",
          "coupon": "",
          "collection_count": "",
          "browse_count": "",
          "total_money": "",
          "certified": "",
          "nickname": "",
          "is_pay_password": "",
          "follow_count": "",
          "is_close": ""
        },
        "swiperNum": "",
        "inputList": [],
        "tabs": "0",
        "isJump": true,
        "goods_List": [],
        "sort_type": "desc",
        "sort_field": "1",
        "max_price": "",
        "brand_id": "",
        "min_price": "",
        "showId": "1",
        "is_showbrand": true,
        "dataDrandList": [],
        "is_showprice": true,
        "money": 0,
        "cutId": "1",
        "keyword": "",
        "type": "0"
      };
    },
    computed: {
      themeColor() {
        return this.$store.getters.themeColor
      },
      isLogin() {
        return this.$store.state.token == '' ? false : true;
      },
      userInfo: {
        get() {
          return this.$store.state.userInfo
        },
        set() {
          this.$store.commit('updateUserInfo', value)
        },
      }
    },
    watch: {},
    onLoad(options) {
      let {
        keyword,
        cid,
        type
      } = options
      if (keyword !== undefined) this.keyword = keyword
      if (cid !== undefined) this.cid = cid
      if (type !== undefined) this.type = type
      if (global.appTabBarType) this.toHomeDiy()
      this.queryListFunc()
      this.queryRotographFunc()
      this.goodsListdfFunc()
    },
    onUnload() {},
    onReady() {
      // #ifdef APP
      this.upAppFunc()
      // #endif

    },
    onShow() {},
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {
      this.queryListFunc()
      this.queryRotographFunc()

      this.goodsListdfFunc()
    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      //广告跳转
      toLunFunc(href) {
        this.dynamicJump(href);
      },
      //商品管理-获取一级商品分类
      async ClassificationFunc() {
        //请求方法
        //数据验证

        let datadataClassification = await this.$api.get(global.apiUrls.post641590baa0d47, {

        });

        if (datadataClassification.data.code != 1) {
          this.$message.info(datadataClassification.data.msg);
          return
        }
        let infodataClassification = datadataClassification.data;
        this.dataClassification = infodataClassification.data

      },
      //获取分类
      async queryListFunc() {
        let datadataList = await this.$api.get(global.apiUrls.post63e369d925758, {

        });

        if (datadataList.data.code != 1) {
          this.$message.info(datadataList.data.msg);
          return
        }
        let infodataList = datadataList.data;
        this.dataList = infodataList.data
        console.log('dataList', this.dataList)

      },
      //获取轮播图
      async queryRotographFunc() {
        //请求方法
        //数据验证

        let datadataRotograph = await this.$api.get(global.apiUrls.post641e624160dd0, {
          type: '1'
        });

        if (datadataRotograph.data.code != 1) {
          this.$message.info(datadataRotograph.data.msg);
          return
        }
        let infodataRotograph = datadataRotograph.data;
        this.dataRotograph = infodataRotograph.data

      },

      //金刚区跳转
      golistFunc(item) {
        uni.navigateTo({
          url: `/pages/fl/bannerCate/bannerCate?cid=${item.aid}&name=${item.name}`
        })
      },
      //轮播图跳转
      gothumbFunc(url) {
        this.dynamicJump(url);
        // if (this.isJump === false) {
        //   return
        // }
        // this.isJump = false;
        // if (url != '') {
        //   this.dynamicJump(url);
        //   setTimeout(() => {
        //     this.isJump = true;
        //   }, 1000)
        // } else {
        //   this.isJump = true;
        // }
      },

      //更新App
      upAppFunc() {
        this.$util.debounce(
          () => {
            this.$refs.update.checkAppUpdate()
          },
          1000,
          true
        )
      },
      //获取商品列表
      goodsListdfFunc() {
        this.minixPagingListsApi = global.apiUrls.post64184ac1cafc3;
        this.pageingListApiMethod = 'post';
        this.allowOnloadGetList = false;
        this.pagingListPostDataContent = {
          goods_type: 2
        }
        this.listData = [];
        this.goods_List = this.listData;
        this.pagingListToggle();

      },
      //综合切换
      switchComprehensiveFunc() {
        this.sort_field = '1';
        this.showId = '1';
        this.goodsListdfFunc()
      },

      //清空关键词
      cleanKeywordFunc() {
        this.keyword = ''
        if (this.showId == '1') {
          this.goodsListdfFunc()
        } else {
          this.Func()
        }
      },



      pagingListPostData() {
        return this.pagingListPostDataContent
      },

    }
  };
</script>
<style lang="scss" scoped>
  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: url(image-path('12.png')) no-repeat;
    background-size: 100% auto;
  }

  .home_flex_0 {
    width: 617rpx;
  }

  .home_fd0_1_c0 {
    width: 64rpx;
    height: 64rpx;
    border-radius: 28rpx 28rpx 28rpx 28rpx;
  }

  .home_fd0_1 {
    margin: 48rpx 0rpx 0rpx 0rpx;
  }

  .home_fd0_0_c0_c0_c2 {
    color: #EF0600;
    font-size: 20rpx;
    font-weight: 700;
    line-height: 28rpx;
    width: 30rpx;
    text-align: center;
  }

  .home_fd0_0_c0_c0_c1_c1_c0_c1_c1 {
    color: rgba(102, 102, 102, 1);
    font-size: 18rpx;
    font-weight: 500;
    line-height: 25rpx;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .home_fd0_0_c0_c0_c1_c1_c0_c1_c0 {
    color: rgba(102, 102, 102, 1);
    font-size: 18rpx;
    font-weight: 500;
    line-height: 25rpx;
  }

  .home_fd0_0_c0_c0_c1_c1_c0_c0 {
    color: var(--benbenFontColor0);
    font-size: 20rpx;
    font-weight: 500;
    line-height: 28rpx;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    max-width: 200rpx;
    margin: 0rpx 0rpx 8rpx 0rpx;
  }

  .home_fd0_0_c0_c0_c1_c1 {
    margin: 6rpx 0rpx 0rpx 0rpx;
  }

  .home_fd0_0_c0_c0_c1_c0 {
    color: var(--benbenFontColor0);
    font-size: 22rpx;
    font-weight: 600;
    line-height: 30rpx;
    margin: 0rpx 0rpx 6rpx 0rpx;
  }

  .home_fd0_0_c0_c0_c1 {
    margin: 24rpx 0rpx 20rpx 16rpx;
  }

  .home_fd0_0_c0_c0_c0_c1_c0 {
    color: var(--benbenFontColor0);
    font-size: 18rpx;
    font-weight: 400;
    line-height: 28rpx;
  }

  .home_price2_fd0_0_c0_c0_c0_c0_c1 {
    font-size: 24rpx;
  }

  .home_price1_fd0_0_c0_c0_c0_c0_c1 {
    font-size: 28rpx;
  }

  .home_fd0_0_c0_c0_c0_c0_c1 {
    color: #ff5536;
    font-weight: 600;
  }

  .home_fd0_0_c0_c0_c0_c0_c0 {
    color: var(--benbenFontColor7);
    font-size: 24rpx;
    font-weight: 700;
    line-height: 33rpx;
  }

  .home_fd0_0_c0_c0_c0 {
    width: 140rpx;
  }

  .home_fd0_0_c0_c0 {
    background: url(image-path('5.png')) no-repeat;
    background-size: 100% auto;
    padding: 0rpx 14rpx 0rpx 0rpx;
    margin: 0rpx 0rpx 24rpx 0rpx;
    width: 481rpx;
  }

  .home_fd0_0_c0 {
    touch-action: none;
    width: 481rpx;
    height: 350rpx;
  }

  .home_fd0_0 {
    background: url(image-path('4.png')) no-repeat;
    background-size: 100% 100% !important;
    padding: 294rpx 68rpx 24rpx 69rpx;
  }

  .home_flex_1 {
    background: url(image-path('12.png')) no-repeat;
    width: 750rpx;
    height: 170rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .home_numberfd1_1_c0_c1_c0 {
    background: #525050;
    position: absolute;
    bottom: 20rpx;
    right: 30rpx;
    width: 80rpx;
    height: 40rpx;
    border-radius: 6rpx 6rpx 6rpx 6rpx;
    font-size: 24rpx;
    color: #FFFFFF;
    line-height: 46rpx;
    font-weight: 400;
  }

  .home_fd1_1_c0_c1_c1_c0 {
    line-height: 50rpx;
    color: var(--benbenFontColor7);
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    padding: 0rpx 0rpx 0rpx 10rpx;
  }

  .home_fd1_1_c0_c1 {
    width: 490rpx;
    height: 50rpx;
  }

  .home_swiperDotUnselectedfd1_1_c0_c1 {
    border: 1px solid rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.3);
    width: 16rpx;
    height: 16rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    margin: 0rpx 6rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: #fff;
  }

  .home_swiperDotSelectedfd1_1_c0_c1 {
    border: 1px solid #00A7FF;
    background: #00A7FF;
    width: 16rpx;
    height: 16rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    margin: 0rpx 6rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: #fff;
  }

  ::v-deep .home_swiperDotfd1_1_c0_c1 {
    position: absolute;
    bottom: 20rpx;
    left: 0rpx;
    right: 0rpx;
  }

  .home_fd1_1_c0_c0 {
    width: 24rpx;
    height: 24rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .home_fd1_1_c0 {
    background: rgba(255, 247, 227, 1);
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    padding: 0rpx 24rpx 0rpx 24rpx;
    margin: 24rpx 32rpx 24rpx 32rpx;
    height: 64rpx;
  }

  .home_fd1_0_c0_c0 {
    margin: 0rpx 12rpx 0rpx 12rpx;
    color: rgba(253, 237, 201, 1);
    font-size: 36rpx;
    font-weight: 700;
    line-height: 45rpx;
  }

  .home_fd1_0_c0 {
    margin: 12rpx 0rpx 12rpx 24rpx;
  }

  .home_numberfd2_0_c0 {
    background: #525050;
    position: absolute;
    bottom: 20rpx;
    right: 30rpx;
    width: 80rpx;
    height: 40rpx;
    border-radius: 6rpx 6rpx 6rpx 6rpx;
    font-size: 24rpx;
    color: #FFFFFF;
    line-height: 46rpx;
    font-weight: 400;
  }

  .home_fd2_0_c1_c0 {
    width: 702rpx;
    height: 280rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    margin: 24rpx 0rpx 0rpx 0rpx;
  }

  .home_fd2_0 {
    width: 702rpx;
    height: 280rpx;
    overflow: hidden;
  }

  .home_swiperDotUnselectedfd2_0 {
    border: 2px solid var(--benbenbdColor5);
    width: 14rpx;
    height: 14rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    margin: 0rpx 6rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: #fff;
  }

  .home_swiperDotSelectedfd2_0 {
    border: 2px solid var(--benbenbdColor1);
    width: 14rpx;
    height: 14rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    margin: 0rpx 6rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: #fff;
  }

  ::v-deep .home_swiperDotfd2_0 {
    position: absolute;
    bottom: 20rpx;
    left: 0rpx;
    right: 0rpx;
  }

  .home_fd3_0_c1_c0_c0 {
    background: #B82441;
    border-radius: 3rpx 3rpx 3rpx 3rpx;
    width: 30rpx;
    height: 6rpx;
  }

  .home_fd3_0_c1_c0 {
    border-radius: 3rpx 3rpx 3rpx 3rpx;
    width: 60rpx;
    height: 6rpx;
  }

  .home_fd3_0_c1 {
    margin: 16rpx 0rpx 12rpx 0rpx;
  }

  .home_numberfd3_0_c0_c0_c0 {
    background: #525050;
    position: absolute;
    bottom: 20rpx;
    right: 30rpx;
    width: 80rpx;
    height: 40rpx;
    border-radius: 6rpx 6rpx 6rpx 6rpx;
    font-size: 24rpx;
    color: #FFFFFF;
    line-height: 46rpx;
    font-weight: 400;
  }

  .home_fd3_0_c0_c0_c1_c0_c0_c1 {
    color: var(--benbenFontColor0);
    font-size: 24rpx;
    font-weight: 500;
    line-height: 33rpx;
    margin: 8rpx 0rpx 0rpx 0rpx;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .home_fd3_0_c0_c0_c1_c0_c0_c0 {
    width: 72rpx;
    height: 72rpx;
    border-radius: 50rpx;
  }

  .home_fd3_0_c0_c0_c1_c0_c0 {
    width: 25%;
    height: 160rpx;
  }

  .home_fd3_0_c0_c0_c1_c0 {
    width: 686rpx;
    // height: 360rpx;
  }

  .home_fd3_0_c0_c0 {
    width: 686rpx;
    // height: 360rpx;
    margin: 0rpx 0rpx 0rpx 0rpx;
  }

  .home_swiperDotUnselectedfd3_0_c0_c0 {
    background: rgba(238, 238, 238, 1);
    width: 30rpx;
    height: 6rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: #fff;
  }

  .home_swiperDotSelectedfd3_0_c0_c0 {
    background: var(--benbenbgColor0);
    width: 30rpx;
    height: 6rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: #fff;
  }

  ::v-deep .home_swiperDotfd3_0_c0_c0 {
    position: absolute;
    bottom: 10rpx;
    left: 0rpx;
    right: 0rpx;
  }

  .home_fd3_0 {
    // background: #FFFFFF;
    // border-radius: 32rpx 32rpx 0rpx 0rpx;
    padding: 12rpx 32rpx 0rpx 32rpx;
  }

  .home_flex_4 {
    padding: 0rpx 24rpx 0rpx 24rpx;
  }

  .home_fd4_0_c1 {
    margin: 0rpx 24rpx 0rpx 24rpx;
    color: #333333;
    font-size: 36rpx;
    font-weight: 600;
    line-height: 50rpx;
  }

  .home_fd4_0_c0 {
    width: 32rpx;
    height: 34rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .home_fd4_0 {
    margin: 40rpx 0rpx 0rpx 0rpx;
  }

  .home_flex_5 {
    padding: 0rpx 0rpx 0rpx 14rpx;
    margin: 24rpx 0rpx 0rpx 0rpx;
  }

  .home_fd5_0_c2_c1_c0 {
    color: rgba(20, 195, 204, 1);
    font-size: 24rpx;
    font-weight: 400;
    line-height: 40rpx;
  }

  .home_fd5_0_c2_c1 {
    background: rgba(20, 195, 204, 0.1);
    background-size: 100% auto;
    width: 40rpx;
    height: 40rpx;
    border-radius: 6rpx;
  }

  .home_fd5_0_c2_c0 {
    color: var(--benbenFontColor7);
    font-size: 24rpx;
    font-weight: 700;
    line-height: 30rpx;
    margin: 8rpx 0rpx 0rpx 0rpx;
  }

  .home_fd5_0_c2 {
    margin: 0rpx 20rpx 18rpx 20rpx;
  }

  .home_fd5_0_c1 {
    font-size: 28rpx;
    font-weight: 600;
    color: var(--benbenFontColor0);
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-height: 40rpx;
    height: 80rpx;
    margin: 24rpx 20rpx 16rpx 20rpx;
  }

  .home_fd5_0_c0 {
    width: 346rpx;
    height: 346rpx;
    border-radius: 16rpx 16rpx 0rpx 0rpx;
  }

  .home_fd5_0 {
    background: #fff;
    width: 346rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    margin: 0rpx 0rpx 10rpx 10rpx;
    padding: 0rpx 0rpx 16rpx 0rpx;
  }

  .home_flex_6 {
    background: #fff;
    width: 566rpx;
    background-size: 100% auto !important;
    position: relative;
    padding: 40rpx 0rpx 0rpx 0rpx;
  }

  .home_fd6_3_c0_c1 {
    background: var(--benbenbgColor7);
    border-radius: 36rpx;
    font-size: 28rpx;
    color: var(--benbenFontColor3);
    width: 246rpx;
    height: 72rpx;
    line-height: 72rpx;
    margin: 0rpx 0rpx 0rpx 18rpx;
  }

  .home_fd6_3_c0_c0 {
    background: var(--benbenbgColor2);
    border-radius: 36rpx;
    font-size: 28rpx;
    color: var(--benbenFontColor3);
    width: 246rpx;
    height: 72rpx;
    line-height: 72rpx;
  }

  .home_fd6_3_c0 {
    padding: 24rpx 23rpx 24rpx 23rpx;
    position: fixed;
    bottom: calc(40rpx + var(--window-bottom));
  }

  .home_fd6_2_c1 {
    padding: 0rpx 20rpx 0rpx 20rpx;
  }

  .home_fd6_2_c0_c0 {
    line-height: 45rpx;
    font-size: 28rpx;
    font-weight: 700;
    color: #333333;
  }

  .home_fd6_1_c1_c1_c0 {
    line-height: 33rpx;
    font-size: 24rpx;
    font-weight: 600;
    color: #333333;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .home_fd6_1_c1_c1 {
    background: #F8F8F8;
    width: 160rpx;
    height: 80rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    margin: 0rpx 8rpx 16rpx 8rpx;
    padding: 0rpx 20rpx 0rpx 20rpx;
  }

  .home_fd6_1_c1_c0_c0 {
    line-height: 33rpx;
    font-size: 24rpx;
    font-weight: 600;
    color: var(--benbenFontColor5);
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .home_fd6_1_c1_c0 {
    border: 1px solid var(--benbenbdColor0);
    background: var(--benbenbgColor1);
    width: 160rpx;
    height: 80rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    background-size: 100% auto !important;
    margin: 0rpx 8rpx 16rpx 8rpx;
    padding: 0rpx 20rpx 0rpx 20rpx;
  }

  ::v-deep .home_fd6_1_c1 {
    margin: 0rpx 16rpx 28rpx 16rpx;
  }

  .home_fd6_1_c0_c1 {
    width: 24rpx;
    height: 24rpx;
  }

  .home_fd6_1_c0_c0 {
    line-height: 45rpx;
    font-size: 27rpx;
    font-weight: 700;
    color: #333333;
  }

  .home_fd6_1_c0 {
    margin: 0rpx 24rpx 17rpx 32rpx;
  }

  .home_fd6_0_c0 {
    line-height: 50rpx;
    font-size: 32rpx;
    font-weight: 700;
    color: #333333;
    margin: 0rpx 0rpx 0rpx 32rpx;
  }

  .home_fd6_0 {
    background: #fff;
    margin: 0rpx 0rpx 35rpx 0rpx;
    height: 86rpx;
    background-size: 100% auto !important;
  }
</style>
